<template>
  <el-popover placement="bottom" width="260" trigger="click">
    <div style="padding: 0.5em 1em">
      <h3>
        <i class="el-icon-circle-plus-outline" style="margin-right:0.5em"></i
        >添加
      </h3>
      <el-form label-width="50px">
        <el-form-item label="姓名">
          <el-input v-model="clientInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="OA名">
          <el-input v-model="clientInfo.clientName"></el-input>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="clientInfo.number"></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="clientInfo.clientOffice">
            <el-option
              v-for="(item, index) in clientOffice"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组">
          <el-select v-model="clientInfo.clientGroup">
            <el-option
              v-for="(item, index) in clientGroup"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质">
          <el-select v-model="clientInfo.clientRank">
            <el-option
              v-for="(item, index) in clientRank"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="clientInfo.rank">
            <el-option
              v-for="(item, index) in rank"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关注">
          <el-select v-model="clientInfo.interest" placeholder="请选择">
            <el-option
              v-for="(item, index) in [
                { label: '未关注', value: 0 },
                { label: '已关注', value: 1 },
              ]"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="clientInfo.level" placeholder="请选择">
            <el-option
              v-for="item in [0, 1]"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-tooltip
          class="item"
          effect="dark"
          content="该功能暂时禁用"
          placement="bottom"
        >
          <el-button type="primary" @click="handleInsert">添加</el-button>
        </el-tooltip>
      </div>
    </div>
    <el-button
      slot="reference"
      icon="el-icon-plus"
      circle
      plain
      type="primary"
    ></el-button>
  </el-popover>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      clientInfo: {
        name: "",
        clientName: "",
        clientOffice: "管制二室",
        clientGroup: "A2",
        clientRank: "见习管制员",
        rank: "普通人员",
        interest: 0,
        level: 0,
      },
      blank: "",
    };
  },
  computed: {
    ...mapState({
      clientOffice: (state) => state.statics.clientOffice,
      clientRank: (state) => state.statics.clientRank,
      rank: (state) => state.statics.rank,
      level: (state) => state.statics.level,
      interestList: (state) => state.statics.interest,
      clientList: (state) => state.clientData.clientList,
    }),
    clientGroup() {
      for (let i = 0; i < this.clientOffice.length; i++) {
        if (this.clientOffice[i].value == this.clientInfo.clientOffice) {
          return this.clientOffice[i].children;
        }
      }
      return [];
    },
  },
  methods: {
    handleInsert() {
      if (this.check()) {
        this.upload();
      }
    },
    check() {
      if (
        this.clientInfo.name.length < 2 ||
        this.clientInfo.clientName.length < 2 ||
        this.clientInfo.number.length < 6 ||
        this.clientInfo.clientRank.length < 1 ||
        this.clientInfo.rank.length < 1
      ) {
        this.$notify.error({ title: "错误", message: "请输入全部内容" });
        return false;
      } else {
        return true;
      }
    },
    upload() {
      this.axios
        .post("api/user_create/", {
          user: this.$store.getters.userbase,
          payload: this.clientInfo,
        })
        .then((response) => {
          console.log(response);
          this.clientInfo = JSON.parse(this.blank);
          this.$notify.success({
            title: "完成",
            message: "已添加 " + this.clientInfo.name,
          });
          this.$emit("added");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.blank = JSON.stringify(this.clientInfo);
  },
};
</script>
